import { ref, computed } from 'vue'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import { ElMessage, ElLoading } from 'element-plus'
import { debounce } from 'lodash-es'
// 导入工具模块
import { exportSingleCardToPng, exportMultipleCardsToZip, downloadDataUrl, prepareExportEnvironment } from '../utils/export-utils'
import { paperSizes } from '../utils/unit-conversion'
import { availableStyles, selectedStyle, initStyles, applyStyle, applyStyleClassesToElements, loadStyleFile, getPreviewStyle } from '../utils/style-utils'

// 拖动调整相关
export const editorPanelWidth = ref(50) // 编辑器面板宽度百分比，默认50%
export const isResizing = ref(false)

// 计算编辑器面板样式
export const editorPanelStyle = computed(() => {
    return {
        flex: `0 0 ${editorPanelWidth.value}%`
    }
})

// 开始拖动调整大小
export const startResize = (e: MouseEvent) => {
    isResizing.value = true
    document.addEventListener('mousemove', handleResize)
    document.addEventListener('mouseup', stopResize)
    // 防止选中文本
    e.preventDefault()
}

// 处理拖动事件
const handleResize = (e: MouseEvent) => {
    if (!isResizing.value) return

    // 获取容器宽度
    const container = document.querySelector('.main-content') as HTMLElement
    if (!container) return

    const containerWidth = container.clientWidth
    // 计算鼠标位置相对于容器的百分比
    const percentage = (e.clientX / containerWidth) * 100

    // 限制编辑器面板宽度在20%到80%之间
    editorPanelWidth.value = Math.min(Math.max(percentage, 20), 80)
}

// 停止拖动
const stopResize = () => {
    isResizing.value = false
    document.removeEventListener('mousemove', handleResize)
    document.removeEventListener('mouseup', stopResize)

    // 保存用户偏好到本地存储
    localStorage.setItem('editorPanelWidth', editorPanelWidth.value.toString())
}

// 从本地存储加载用户偏好的面板宽度
export const loadSavedPanelWidth = () => {
    const savedWidth = localStorage.getItem('editorPanelWidth')
    if (savedWidth) {
        editorPanelWidth.value = parseFloat(savedWidth)
    }
}

// 编辑器相关
export const vditorContainer = ref<HTMLElement | null>(null)
export const vditor = ref<any>(null)
export const markdownContent = ref(`# 欢迎使用MD2Card`)

// 卡片预览相关
export const cardPreview = ref<HTMLElement | null>(null)
export const cardList = ref<string[]>([])

// 防抖处理，避免频繁更新预览
export const debounceUpdatePreview = debounce(() => {
    generateCard()
}, 500) // 500ms延迟

// 全屏预览相关
export const fullScreenVisible = ref(false)

// 标签页
export const activeTab = ref('preview')

// 卡片设置
export const cardWidth = ref(440)
export const cardHeight = ref(586)
export const cardHeightReadonly = ref(false)
export const selectedRatioVisible = ref(false)
export const selectedRatio = ref('custom')
// selectedStyle 已移至 style-utils.ts
export const maxCharsPerCard = ref(500)
export const hideOverflow = ref(false) // 默认显示全部内容

// 单位设置
export const unitMode = ref('px') // 只使用像素模式
export const selectedPaperSize = ref('A4') // 默认为A4尺寸
export const paperScale = ref(1) // 纸张缩放比例，默认为1.0

// 样式相关功能已移至 style-utils.ts 模块
// 导出样式相关变量以保持兼容性
export { availableStyles, selectedStyle, initStyles }

// 计算卡片样式
export const cardStyle = computed(() => {
    const style: Record<string, string> = {
        'overflow': hideOverflow.value ? 'hidden' : 'visible'
    }

    // 设置尺寸（只使用像素模式）
    style['width'] = `${cardWidth.value}px`
    style['min-width'] = `${cardWidth.value}px`
    style['height'] = hideOverflow.value ? `${cardHeight.value}px` : 'auto'
    style['min-height'] = `${cardHeight.value}px`

    // 应用选中的风格
    const selectedStyleObj = availableStyles.value.find(style => style.name === selectedStyle.value)
    if (selectedStyleObj) {
        style.className = `card-${selectedStyleObj.name.replace('.css', '')}`
    }

    return style
})

// 初始化编辑器
// 资源加载错误处理函数
export const handleResourceError = (error: any) => {
    console.error('Vditor资源加载失败:', error)
    ElMessage.error('编辑器资源加载失败，请检查网络连接或刷新页面重试')
}

export const initEditor = () => {
    // 应用默认的A4纸张尺寸
    applyPaperSize()

    if (vditorContainer.value) {
        vditor.value = new Vditor(vditorContainer.value, {
            height: 'calc(100vh - 180px)',
            mode: 'ir', // 使用当前选择的模式
            value: markdownContent.value,
            cache: {
                enable: true,
                id: 'vditor-cache'
            },
            // 使用本地资源路径
            cdn: './packages/vditor',
            preview: {
                hljs: {
                    style: 'github'
                },
                mode: "editor"
            },
            upload: {
                accept: 'image/*',
                handler: (_files) => {
                    return null; // 返回null表示不处理上传
                }
            },
            toolbar: [
                { name: 'edit-mode', tip: '编辑模式', tipPosition: 'e' },
                { name: 'headings', tip: '标题', tipPosition: 'e' },
                { name: 'bold', tip: '加粗', tipPosition: 'e' },
                { name: 'outline', tip: '大纲', tipPosition: 'e' },
                { name: 'italic', tip: '斜体', tipPosition: 'e' },
                { name: 'strike', tip: '删除线', tipPosition: 'e' },
                { name: 'link', tip: '链接', tipPosition: 'e' },
                { name: 'list', tip: '无序列表', tipPosition: 'e' },
                { name: 'ordered-list', tip: '有序列表', tipPosition: 'e' },
                { name: 'check', tip: '任务列表', tipPosition: 'w' },
                { name: 'line', tip: '分隔线', tipPosition: 'w' },
                { name: 'quote', tip: '引用', tipPosition: 'w' },
                { name: 'code', tip: '代码块', tipPosition: 'w' },
                { name: 'inline-code', tip: '行内代码', tipPosition: 'w' },
                { name: 'upload', tip: '上传', tipPosition: 'w' },
                { name: 'table', tip: '表格', tipPosition: 'w' },
                { name: 'undo', tip: '撤销', tipPosition: 'w' },
                { name: 'redo', tip: '重做', tipPosition: 'w' },
                { name: 'export', tip: '导出', tipPosition: 'w' },
                { name: 'fullscreen', tip: '全屏', tipPosition: 'w' },
            ],
            after: () => {
                // 编辑器初始化完成后的回调
                generateCard()
                const wysiwygButton = document.querySelector('[data-mode="wysiwyg"]') as HTMLElement;
                if (wysiwygButton) {
                    wysiwygButton.style.display = wysiwygButton.style.display === 'none' ? '' : 'none';
                }
            },
            input: (value: string) => {
                // 编辑器内容变化时的回调
                markdownContent.value = value
                debounceUpdatePreview()
            }
        })
    }
}

// 应用比例
export const applyRatio = () => {
    console.log('应用比例:', selectedRatio.value)
    // 如果是自定义比例，不做任何处理
    if (selectedRatio.value === 'custom') {
        cardHeightReadonly.value = false
    } else {
        cardHeightReadonly.value = true
        // 根据选择的比例计算高度
        switch (selectedRatio.value) {
            case '1:1':
                cardHeight.value = cardWidth.value
                break
            case '4:3':
                cardHeight.value = Math.round(cardWidth.value * 3 / 4)
                break
            case '3:4':
                cardHeight.value = Math.round(cardWidth.value * 4 / 3)
                break
            case '16:9':
                cardHeight.value = Math.round(cardWidth.value * 9 / 16)
                break
            case '9:16':
                cardHeight.value = Math.round(cardWidth.value * 16 / 9)
                break
        }
    }
    updateCardStyle()
    // 重新生成卡片，因为比例可能会影响高度，特别是自动拆分情况下
    generateCard()
}

// 应用纸张尺寸
export const applyPaperSize = () => {
    console.log('应用纸张尺寸:', selectedPaperSize.value)
    // 获取选中的纸张尺寸（现在paperSizes中的每个尺寸都是函数）
    const paperSizeFunc = paperSizes[selectedPaperSize.value]

    // 应用纸张尺寸（考虑缩放比例）
    if (paperSizeFunc && selectedPaperSize.value !== '自定义') {
        selectedRatioVisible.value = false
        const paper = paperSizeFunc()
        cardWidth.value = paper.width
        cardHeight.value = paper.height
        // 更新为自定义比例，因为纸张尺寸可能不符合预设比例
        selectedRatio.value = 'custom'
    } else {
        selectedRatioVisible.value = true
    }
    // 更新卡片样式
    updateCardStyle()
    // 重新生成卡片
    generateCard()
}

// 样式相关功能已移至 style-utils.ts 模块
// 导出函数以保持兼容性
export { applyStyle, getPreviewStyle }

// 更新卡片样式
export const updateCardStyle = () => {
    // 由于使用了计算属性，这里不需要额外操作
    // 但保留此函数用于未来可能的扩展
}

// Markdown处理相关功能已移至 markdown-utils.ts 模块
import { splitMarkdownContent, renderMarkdownToHtml } from '../utils/markdown-utils'

/**
 * 生成卡片
 * 将Markdown内容转换为HTML并应用样式
 */
export const generateCard = async () => {
    if (!vditor.value) return

    try {
        // 获取编辑器内容
        const content = vditor.value.getValue()

        // 拆分内容
        const contentParts = splitMarkdownContent(content)

        // 渲染内容并更新卡片列表
        const htmlContents = await renderMarkdownToHtml(contentParts)
        
        // 更新卡片列表
        cardList.value = htmlContents
        
        // 确保新生成的卡片应用当前选中的样式
        setTimeout(() => {
            applyStyle()
        }, 50)

        // 应用变换
        transformPreview()
    } catch (error) {
        console.error('生成卡片失败:', error)
        ElMessage.error('生成卡片失败，请检查Markdown内容')
    }
}

/**
 * 应用变换到预览容器
 * 处理缩放和尺寸调整
 */
export const transformPreview = () => {
    // 应用transform缩放
    const previewContainers = document.querySelectorAll('.card-preview') as NodeListOf<HTMLElement>;

    if (!previewContainers.length) {
        return; // 没有预览容器，直接返回
    }

    previewContainers.forEach(previewContainer => {
        // 设置基本尺寸
        previewContainer.style.width = `${cardWidth.value}px`;
        previewContainer.style.height = `${cardHeight.value}px`;
        previewContainer.style.transform = `scale(${paperScale.value})`;
        previewContainer.style.transformOrigin = 'center center';

        // 根据缩放比例计算边距
        if (paperScale.value === 1) {
            previewContainer.style.margin = '0';
        } else if (paperScale.value < 1) {
            // 缩小时的边距计算
            const marginValue = -1 * cardHeight.value * (1 - paperScale.value) / 2;
            previewContainer.style.margin = `${marginValue}px`;
        } else {
            // 放大时的边距计算
            const marginValue = cardHeight.value * (paperScale.value - 1) / 2;
            previewContainer.style.margin = `${marginValue}px`;
        }
    });
}


// 全屏预览
export const previewFullScreen = () => {
    // 切换全屏预览状态
    fullScreenVisible.value = true
    // 但可能需要调整样式或滚动位置
    setTimeout(() => {
        // 滚动到顶部
        window.scrollTo(0, 0)

        // 重新生成卡片以确保显示正确
        generateCard()
    }, 100)
}

// 导出功能已移至 export-utils.ts 模块

/**
 * 导出为PNG
 * 将卡片导出为PNG图片，单卡片直接下载，多卡片打包为ZIP
 */
export const exportAsPNG = async () => {
    // 显示loading
    const loading = ElLoading.service({
        lock: true,
        text: '正在导出PNG...',
        background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
        // 重置缩放比例以确保导出质量
        const originalScale = paperScale.value
        paperScale.value = 1
        
        // 准备导出环境
        await prepareExportEnvironment(transformPreview)

        // 获取预览容器
        const previewContainers = document.querySelectorAll('.card-preview') as NodeListOf<HTMLElement>;
        if (!previewContainers.length) {
            throw new Error('未找到预览内容')
        }

        const exportScale = 4 // 默认导出比例

        if (previewContainers.length === 1) {
            // 单卡片导出
            const previewContainer = previewContainers[0]
            const dataUrl = await exportSingleCardToPng(previewContainer, exportScale)
            const sizeInfo = selectedPaperSize.value !== '自定义' ? `_${selectedPaperSize.value}` : ''
            downloadDataUrl(dataUrl, `md2card${sizeInfo}_${new Date().getTime()}.png`)
            ElMessage.success('PNG导出成功')
        } else {
            // 多卡片导出
            await exportMultipleCardsToZip(previewContainers, exportScale, selectedPaperSize.value)
            ElMessage.success(`成功导出 ${previewContainers.length} 张PNG卡片`)
        }
        
        // 恢复原始缩放比例
        paperScale.value = originalScale
        transformPreview()
    } catch (error) {
        console.error('PNG导出失败:', error)
        ElMessage.error(error instanceof Error ? `导出失败: ${error.message}` : '导出过程中发生未知错误')
    } finally {
        loading.close()
    }
}